<!-- directive:title placeholder的样式设置 -->
<!-- directive:breadcrumb placeholder的样式设置 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> placeholder的样式设置 </div>
        <div class='panel-body'>
            <article class="docs-content">
                <p>在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果，这时就可以用以下代码来对placeholder进行样式设置了。</p>
                <script type="text/xianjs" ui-bs>
                    ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */
                    :-moz-placeholder{} /* Firefox版本4-18 */
                    ::-moz-placeholder{} /* Firefox版本19+ */
                    :-ms-input-placeholder{} /* IE浏览器 */
                    // 注1：冒号前写对应的input或textarea元素等。
                    // 注2：placeholder属性是css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。
                </script>
                <p><input id="input-test" type="text" placeholder="修改placeholder样式" /></p>
                <p></p>
                <style ui-bs>
                    #input-test{ color: #FFC0CB; font-size: 1.2em; width: 180px; height: 36px; }
                    #input-test::-webkit-input-placeholder{ color: #ADD8E6; }
                    // 不知道为何火狐的placeholder的颜色是粉红色，怎么改都不行
                    #input-text::-moz-placeholder{ color: #ADD8E6; }
                    // 由于我的IE刚好是IE9，支持不了placeholder
                    #input-text:-ms-input-placeholder{ color: #ADD8E6; }
                </style>
            </article>
        </div>
    </div>
</div>

